<template>
  <div class="load">
    <Swipe vertical class="swiper" :show-indicators="false" :loop="false" @change="swiperChange">
      <SwipeItem>
        <div class="first" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/load/first/bg.png' + ')'}">
          <img class="bg" :src="cdnUrl + '/assets/load/first/bg-1.png'" alt="">
          <img class="star1 animated infinite flash" style="animation-duration: 3s" :src="cdnUrl + '/assets/load/first/star-1.png'" alt="">
          <img class="star2 animated infinite flash" style="animation-duration: 3s" :src="cdnUrl + '/assets/load/first/star-2.png'" alt="">
          <img class="title-left animated fadeInUp" v-show="threeFlag >= 1" :src="cdnUrl + '/assets/load/first/title-l.png'" alt="">
          <img class="title-left right animated fadeInUp" v-show="threeFlag >= 1" :src="cdnUrl + '/assets/load/first/title-r.png'" alt="">
          <img class="people" :src="cdnUrl + '/assets/load/first/people.png'" alt="">
          <div class="bottom" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/load/first/book.png' + ')'}">
            <div class="cons" v-if="threeFlag >= 1">
              <img class="text-1 animated slideInLeft" :src="cdnUrl + '/assets/load/first/text-1.png'" alt="" />
              <img class="text-2 animated slideInLeft" :src="cdnUrl + '/assets/load/first/text-2.png'" alt="" />
              <img class="text-3 animated slideInLeft" :src="cdnUrl + '/assets/load/first/text-3.png'" alt="" />
            </div>
          </div>
          <img class="down" :src="cdnUrl + '/assets/load/first/down.png'" alt="" />
        </div>
      </SwipeItem>
      <SwipeItem>
        <div class="second" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/load/second/bg.png' + ')'}">
          <div class="con" :style="{backgroundImage: 'url('+ cdnUrl + '/assets/load/second/bg-1.png' + ')'}">
            <div class="cons" v-if="textFlag >= 1">
              <img class="text-1 animated slideInLeft" :src="cdnUrl + '/assets/load/second/text-1.png'" alt="">
              <img class="text-2 animated slideInLeft" :src="cdnUrl + '/assets/load/second/text-2.png'" alt="">
              <img class="text-3 animated slideInLeft" :src="cdnUrl + '/assets/load/second/text-3.png'" alt="">
              <img class="text-4 animated slideInLeft" :src="cdnUrl + '/assets/load/second/text-4.png'" alt="">
              <img class="text-5 animated slideInLeft" :src="cdnUrl + '/assets/load/second/text-5.png'" alt="">
              <img class="text-6 animated slideInLeft" :src="cdnUrl + '/assets/load/second/text-6.png'" alt="">
              <img class="text-7 animated slideInLeft" :src="cdnUrl + '/assets/load/second/text-7.png'" alt="">
              <img class="title animated fadeIn" :src="cdnUrl + '/assets/load/second/title.png'" alt="">
            </div>
          </div>
          <div class="btn animated infinite pulse" @click="showIndex">
            <img :src="cdnUrl + '/assets/load/second/btn.png'" alt="">
          </div>
        </div>
      </SwipeItem>
    </Swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant'
import { cdnUrl } from '../../service/env'
export default {
  name: 'Load',
  props: {
    show: Function
  },
  data () {
    return {
      threeFlag: 0,
      textFlag: 0,
      cdnUrl: cdnUrl
    }
  },
  components: {
    Swipe,
    SwipeItem
  },
  mounted () {
    this.threeLine()
  },
  methods: {
    // 三行文字动效
    threeLine () {
      this.threeFlag = 1
      setTimeout(() => {
        this.threeFlag = 2
        setTimeout(() => {
          this.threeFlag = 3
        }, 300)
      }, 300)
    },
    // 多行文字特效
    moreline () {
      let inter = setInterval(() => {
        this.textFlag++
        if (this.textFlag === 9) {
          clearInterval(inter)
        }
      }, 300)
    },
    // 轮播回调
    swiperChange (index) {
      if (index === 1) {
        this.textFlag = 0
        setTimeout(() => {
          this.moreline()
        }, 100)
      } else {
        this.threeFlag = 0
        setTimeout(() => {
          this.threeLine()
        }, 100)
      }
    },
    // 显示首页
    showIndex () {
      this.$emit('show')
    }
  }
}
</script>

<style scoped lang="scss">
.load{
  width: 100%;
  height: 100%;
  .swiper{
    width: 100%;
    height: 100%;
    .first{
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: relative;
      // background: url("../../assets/load/first/bg.png") no-repeat;
      background-size: 100% 100%;
      .bg{
        width: 78.1%;
        margin: 35px 0 0 12.5%;
      }
      .star1{
        width: 6.6%;
        position: absolute;
        top: 115px;
        left: 5.8%;
      }
      .star2{
        width: 8.9%;
        position: absolute;
        top: 285px;
        right: 20.8%;
        z-index: 2;
      }
      .title-left{
        width: 14%;
        height: 290px;
        position: absolute;
        top: 21px;
        left: 33.6%;
        z-index: 2;
      }
      .right{
        left: 53.8%;
      }
      .people{
        width: 30%;
        position: absolute;
        top: 211px;
        left: 3.6%;
      }
      .bottom{
        width: 100%;
        height: 200px;
        position: absolute;
        bottom: 0;
        z-index: 1;
        // background: url("../../assets/load/first/book.png") no-repeat;
        background-size: 100% 100%;
        .cons{
          width: 100%;
          height: 100%;
          .text-1{
            width: 36.7%;
            margin: 28px 0 -2px 31.1%;
          }
          .text-2{
            width: 36.7%;
            margin: 0 0 -5px 32.3%;
          }
          .text-3{
            width: 50%;
            margin-left: 26.9%;
          }
        }
      }
      .down{
        width: 10%;
        position: absolute;
        left: 45%;
        z-index: 2;
        bottom: 20px;animation:changDown 1s linear 0.2s infinite;
      }
      @keyframes changDown{
        0%{
          // transform: translateY(10px);
        }
        100%{
          transform: translateY(10px);
        }
      }
    }
    .second{
      width: 100%;
      height: 100%;
      overflow: hidden;
      // background: url("../../assets/load/second/bg.png") no-repeat;
      background-size: 100% 100%;
      .con{
        width: 81.3%;
        height: 392px;
        margin: 19px auto 14px;
        // background: url("../../assets/load/second/bg-1.png") no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        .cons{
          width: 100%;
          height: 100%;
          img{
            margin: 0 auto 7px;
          }
          .text-1{
            width: 18.1%;
            margin-top: 29px;
          }
          .text-2{
            width: 31.5%;
          }
          .text-3{
            width: 32.3%;
          }
          .text-4{
            width: 58.7%;
          }
          .text-5{
            width: 32.3%;
          }
          .text-6{
            width: 55%;
          }
          .text-7{
            width: 68.3%;
            margin-bottom: 15px;
          }
          .title{
            width: 50%;
          }
        }
      }
      .btn{
        width: 50%;
        height: 29px;
        margin: 0 auto;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
